<template>
  <div style="height: 100%;width: 100%">
    <div style="height: 50px;width: 100%">
      <n-space justify="space-between">
        <n-button type="primary" tertiary strong @click="openDownloadDialog">
          生成优选股票
        </n-button>
        <n-input-group>
          <n-button @click="getDays">
            <template #icon>
              <n-icon>
                <SyncOutline />
              </n-icon>
            </template>
          </n-button>
          <n-select
              v-model:value="selectedDay"
              filterable
              bordered
              placeholder="选择日期"
              :options="options"
              style="width: 200px"
              @select="getPreferredStockList"
          />
          <n-button type="primary" tertiary @click="getPreferredStockList">
            <template #icon>
              <n-icon>
                <SearchOutline/>
              </n-icon>
            </template>
          </n-button>
        </n-input-group>
      </n-space>
    </div>
    <n-data-table
        striped
        size="small"
        :columns="columns"
        :data="data"
        :bordered="true"
    />
  </div>
  <n-modal v-model:show="showDialog"
           preset="card"
           draggable
           :closable="!commonStore.loading"
           title="生成优选"
           class="w-600px h-400px"
           :close-on-esc="false"
           :mask-closable="false">
<!--    <PreferredComputeDialog :show-dialog="showDialog"/>-->
    <ExecuteDialog action="calculatePreferred" btnLabel="计算"/>
  </n-modal>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import PreferredComputeDialog from "../components/PreferredComputeDialog.vue";
import {useCommonStore} from "../store/common";
import {DayModel, MarketService} from "../../bindings/quant/backend/service";
import {PreferredEntity} from "../../bindings/quant/backend/entity";
import ExecuteDialog from "../components/ExecuteDialog.vue";
import {RefreshOutline,SyncOutline,SearchOutline} from "@vicons/ionicons5";
import {NButton} from "naive-ui";

const commonStore = useCommonStore()
const showDialog = ref(false)
const showDrawer = ref(false)
const selectedDay = ref()
const options = ref<DayModel[] | null>([])
const columns = [
  {
    title: "时间",
    key: "time"
  },
  {
    title: "股票代码",
    key: "stock_code"
  },
  {
    title: "股票名称",
    key: "stock_name"
  },
  {
    title: "昨日收盘价",
    key: "last_close"
  },
  {
    title: "分数",
    key: "score"
  },
];
let data = ref<PreferredEntity[]>()
const openDownloadDialog = () => {
  showDialog.value = true
}
const openConfigDrawer = () => {
  showDrawer.value = true
}

const getPreferredStockList = () => {
  if (!selectedDay.value) {
    return
  }
  console.log("日期：" + selectedDay.value)
  MarketService.GetPreferredEntitiesByDay(selectedDay.value).then((result: PreferredEntity[]) => {
    data.value = result
    console.log(result.length)
  }).catch((err: Error) => {
    console.log(err)
  })
}

const getDays = () => {
  MarketService.GetDistinctPreferredDays().then((result: DayModel[]) => {
    options.value = result
  }).catch((err: Error) => {
    console.log(err)
  })
}

onMounted(() => {
  getDays()
})
</script>


<style scoped>

</style>